<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
		<div id="app">
			
			<h1>{{test}}</h1>
			<ul>
				<li>firstname:<input type="text" v-model="firstname"/></li>
				<li>lastname:<input type="text" v-model="lastname"/></li>
				<li>fullname:{{fullname}}</li>
			</ul>
		</div>
		
		
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let myApp = new Vue({
				el:'#app',
				data:{
					// msg:'wewewe',
					num:20,
					firstname:'Tom', 
					lastname:'jjj',
					fullname:'Tomjjj'
					
				},
				methods:{
					//作为普通的函数刦在使用，或者作为事件的触发函数
					
				},
				computed:{
					//计算属性李的函数可以当做属性来使用，从缓存中读取数据的功能是核心特点
					test(){
						return this.num*10 //执行1次，第二次直接从缓存汇总将结果直接读出来。除非数据变化，才会重新计算
					}
				},
				watch:{//侦听器可以监视数据的变化，想监听谁watch当中的函数名要和想监视ed数据同名，侦听器可以做异步的监视
					firstname(val){
						this.fullname = val + this.lastname
					},
					lastname(val){
						this.fullname = this.firstname + val
					}
				}
			})
		</script>
		
</body>
</html>